<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>8-modal组件</title>
    <style>
        p,
        h4 {
            margin: 0;
        }
        
        .modal {
            width: 500px;
            background-color: #fff;
            border: 1px solid rgba(0, 0, 0, .2);
            border-radius: 6px;
            box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
        }
        
        .modal-header {
            padding: 15px;
            border-bottom: 1px solid #e5e5e5;
        }
        
        .modal-content div {
            padding: 20px;
        }
        
        .modal-footer {
            padding: 15px;
            text-align: right;
            border-top: 1px solid #e5e5e5;
        }
        
        .btn {
            padding: 5px 15px;
            border: none;
            outline: none;
            background: #e8e8e8;
            cursor: pointer;
        }
        
        .blue {
            color: #fff;
            background-color: #39f;
            border-color: #39f;
        }
        
        .red {
            color: #fff;
            background-color: #f00;
            border-color: #f00;
        }
        
        .green {
            color: #fff;
            background-color: green;
            border-color: green;
        }
    </style>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">

        <tp-modal modal-title="提醒标题" @on-ok="okHandler"></tp-modal>
        <br>
        <tp-modal>
            <ul slot="s-modal-content">
                <li v-for="(item,index) in list" :key="index">{{item}}</li>
            </ul>
            <div slot="s-modal-footer">
                <span class="btn blue" @click="mOk">确定</span>
                <span class="btn red" @click="mReset">重置</span>
                <span class="btn green" @click="mBack">返回</span>
            </div>
        </tp-modal>
        <tp-modal @on-cancel="cancelHandler"></tp-modal>
    </div>
    <script>
        Vue.component('tp-modal', {
            props: {
                modalTitle: {
                    type: String,
                    default: '这是一个模态框'
                }
            },
            template: `
                    <div class="modal">
                        <div class="modal-header">
                            <h4>{{modalTitle}}</h4>
                        </div>
                        <div class="modal-content">
                            <div>
                                <slot name="s-modal-content">
                                    在这里添加内容
                                </slot> 
                            </div>
                        </div>
                        <div class="modal-footer">
                            <slot name="s-modal-footer">
                                <input class="btn blue" type="button" value="确定" @click="btnOk" />
                                <input class="btn" type="button" value="取消" @click="btnCancel" />
                            </slot>
                        </div>
                    </div>
            `,
            methods: {
                btnOk: function() {
                    alert('您点击了确定');
                    this.$emit('on-ok');
                },
                btnCancel: function() {
                    alert('您点击了取消')
                    this.$emit('on-cancel');
                }
            }

        })

        // ...就是拆分 妙,味,课,堂 成一个个元素
        var list = [...
            '妙味课堂'
        ];
        new Vue({
                el: "#app",
                data: {
                    list: list
                },
                methods: {
                    okHandler: function() {
                        alert('改变一个div的样式');
                    },
                    cancelHandler: function() {
                        alert('取消去干别的事情了');
                    },
                    mOk: function() {
                        alert('确定按钮');
                    },
                    mReset: function() {
                        alert('重置按钮');
                    },
                    mBack: function() {
                        alert('返回按钮');
                    }
                }
            })
            /*
                设置的props：
                    modalTitle 提醒信息 默认为 '这是一个模态框'

                定制模板：
                    slot为modal-content  定制提醒信息模板
                    slot为modal-footer   定制底部模板

                监控子组件状态变化：
                    事件名on-ok        点击确定触发
                    事件名on-cancel   点击取消触发
            */
    </script>
</body>

</html>